import * as echarts from 'echarts';
import 'echarts-liquidfill';
import {watchEffect,watch } from 'vue';

const getRgba = (color, opc) => {
  return `${color.match(/(.+)\)/)[1]},${opc})`;
}
const colorObj = {
  red: 'rgba(247,119,125)',
  yellow:'rgba(223,182,102)',
  green: 'rgba(137,247,223)',
}
const threshold = [{
  normal: {
    min: 6,
    max: 9,
  }, 
  control: {
    min: 6.5,
    max: 8.5
  }
},{
  normal: {
    min: 0,
    max: 420,
  }, 
  control: {
    min: 0,
    max: 300
  }
},{
  normal: {
    min: 0,
    max: 35,
  }, 
  control: {
    min: 0,
    max: 30
  }
},{
  normal: {
    min: 0,
    max: 120,
  }, 
  control: {
    min: 0,
    max: 80
  }
}]
const getColor = (index, value) => {
  // 不超标为绿色，超内控值为黄色，超标准值为红色。
  const ths = threshold[index];
  // ph
  if (index === 0 ){
    if (value >= ths.control.min && value <= ths.control.max) {
      return colorObj.green;
    } else if (value >= ths.normal.min && value <= ths.normal.max) {
      return colorObj.yellow
    }
    return colorObj.red;
  } else {
    if (value <= ths.control.max) {
      return colorObj.green;
    } else if (value <= ths.normal.max) {
      return colorObj.yellow;
    }
    return colorObj.red;
  }
}
const Comp = (props: any) => {
  const { id, data,key} = props;
  
  watchEffect(
    () => {
      const myChart = echarts.init(document.getElementById(id) as any);
      const _data = data.value[key];
      
      if (_data) {
        const min = threshold[key].normal.min;
        const max = threshold[key].normal.max;
        let percent = _data.value / max;
        
        if (min) {
          percent = (_data.value - min) / (max - min);
        }
        const p1 = percent / 10;
        const color = getColor(key, _data.value);
        const option: any ={
          "title": [
              {
                  "text": _data.value,
                  "left": "40%",
                  "top": "center",
                  "textAlign": "center",
                  "textStyle": {
                      "fontSize": 14,
                      "color": "#fff"
                  }
              }
          ],
          "series": [
              {
                  "type": "liquidFill",
                  "radius": "80%",
                  "z": 6,
                  "center": [
                      "50%",
                      "50%"
                  ],
                  "waveLength": 100,
                  "amplitude": 5,
                  "backgroundStyle": {
                    color: 'rgba(0,0,0,0)'
                  },
                  "color": [
                    getRgba(color, '0.7'),
                    getRgba(color, '0.5'),
                    getRgba(color, '0.2'),
                  ],
                  "data": [
                    percent,
                    percent + p1,
                    percent + p1+ p1
                  ],
                  "label": {
                      "normal": {
                          "formatter": ""
                      }
                  },
                  "outline": {
                      "show": true,
                      "itemStyle": {
                          "borderWidth": 0
                      },
                      "borderDistance": 0
                  }
              },
              // 外面的圆圈
              {
                  "type": "pie",
                  "z": 1,
                  "zlevel": -1,
                  "radius": [
                      "80%",
                      "85%"
                  ],
                  "center": [
                      "50%",
                      "50%"
                  ],
                  "hoverAnimation": false,
                  "clockWise": false,
                  "itemStyle": {
                      "normal": {
                          "borderWidth": 20,
                          "color": color
                      }
                  },
                  "label": {
                      "show": false
                  },
                  "data": [
                      100
                  ]
              }
          ]
      }
        myChart.setOption(option);
      }
    
      window.addEventListener('resize', () => {
        myChart?.resize();
      });
    },
    {
      flush: 'post',
    },
  );
};

export default Comp;
